<style lang="less">
  .card_style {
    height: 100%;
    width: 100%;
    overflow: hidden;
    .ivu-card-body {
      padding: 0px;
    }
  }
  .page_style {
    margin-top: 10px;
    text-align: right;
  }
  .bench_search {
    margin-bottom: 10px;
  }
  .nopadding .ivu-table-cell {
    padding: 0px 0px;
  }
  .item1{
    height: 42px;
    line-height: 40px;
  }
  .problem-details{
    line-height: 45px;
    margin-left: 70px;
  }
  .new-btn-sty {
    margin-right: 5px;
    color: #fff;
    background-color: #235CA7;
    border-color: #235CA7;
    font-weight: 500;
  }
  .ml10{
    margin-left: 10px;
  }
  .ml5{
    margin-left: 5px;
  }
  .tag-read{
    width:100%;
    text-align: center;
    line-height: 30px;
    font-size: 18px;
    margin-bottom: 20px;
  }
  .tag-button{
    margin-left: 30%;
    margin-bottom: 20px;
    text-align: center;
    line-height: 30px;
    font-size: 16px;
    width:230px;
  }
  .lyx-table-btn{
    margin-right: 5px;
    // margin-bottom: 2px;
  }
</style>

<template>
  <Card class="card_style" :bordered="false" :dis-hover="true">
    <Row class="bench_search">
       <Col span="4" v-if="company_code === 'LM'">
        <span>区县：</span>
        <Select v-model="searchInfo.level1" transfer="" @on-change="getCommunityList(searchInfo.level1,1)" style="width: 70%;">
          <Option :value="item.id" v-for="item in mailList[0]" v-bind:key="item.id">{{item.title}}</Option>
        </Select>
      </Col>
      <Col span="4">
        <span>街道：</span>
        <Select v-model="searchInfo.level2" transfer="" @on-change="getCommunityList(searchInfo.level2,2)" style="width: 70%;">
          <Option :value="item.id" v-for="item in mailList[1]" v-bind:key="item.id">{{item.title}}</Option>
        </Select>
      </Col>
      <Col span="4">
        <span>社区：</span>
        <Select v-model="searchInfo.level3" transfer="" style="width: 70%;">
          <Option :value="item.id" v-for="item in mailList[2]" v-bind:key="item.id">{{item.title}}</Option>
        </Select>
      </Col>
      <Col span="8">
        <span>社区名称：</span>
        <Input v-model="searchInfo.sq_name" placeholder="社区名称" clearable style="width: 70%" />
      </Col>
      <Col span="2">
        <Button type="info" @click="companyPersonList()"><Icon type="ios-search" /> 搜索</Button>
      </Col>
      <Modal v-model="addModal" title="评分详情" width="700">
        <Form :model="paramData" :label-width="90" :rules="ruleVaildScore" ref="paramData">
          <FormItem label="社区名称" prop="commounity">
            <Input v-model="paramData.commounity" style="width:300px" disabled></Input>
          </FormItem>
          <FormItem label="所属街道" prop="street">
            <Input v-model="paramData.street" style="width:300px" disabled></Input>
          </FormItem>
          <FormItem label="卫生评分" prop="score_sanitation">
            <Rate v-model="paramData.score_sanitation" />
          </FormItem>
          <FormItem label="服务评分" prop="score_serve">
            <Rate v-model="paramData.score_serve" />
          </FormItem>
          <FormItem label="评分人" prop="score_man">
            <Input v-model="paramData.score_man" style="width:300px" placeholder="请输入评分人" v-bind:disabled="disableScore"></Input>
          </FormItem>
          <FormItem label="评分人电话" prop="score_man_phone">
            <Input v-model="paramData.score_man_phone" style="width:300px" placeholder="请输入评分人电话" v-bind:disabled="disableScore"></Input>
          </FormItem>
          <FormItem label="评分渠道" prop="type">
            <Select v-model="paramData.type" style="width:300px" v-bind:disabled="true">
              <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem label="评分描述" prop="score_text">
            <Input v-model="paramData.score_text" type="textarea" :rows="4" placeholder="请输入描述" ></Input>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button type="error" @click="addModal=false">关闭</Button>
          <Button type="success" @click="scoreSubmit('paramData')">保存</Button>
        </div>
    </Modal>
    <Modal v-model="qrCodeModel" title="二维码衔接" width="300">
      <div style="background-color:white;line-height: 2.5;position:relative;width: 100%;height: 200px;" class="notice-content" id="printMe1">
        <div style="position: absolute;margin: auto;margin-top: 10%;margin-left: 20%;width: 100%;" id="qrCode" ref="qrCodeDiv"></div>
      </div>
      <div slot="footer">
        <Button type="error" @click="qrCodeModel=false">关闭</Button>
      </div>
    </Modal>
    </Row>
    <Table border :columns="columns1" :data="tempDatalist">
      <template slot-scope="{ row, index }" slot="action">
        <!-- <Button type="primary" class="lyx-table-btn" size="small"  @click="showInfo(row)" ><span >详情</span> </Button> -->
        <Button type="primary" class="lyx-table-btn" size="small"  @click="copyOpen(row)">发送短信</Button>
        <Button type="info" class="lyx-table-btn" size="small"  @click="bindQRCode(row)">二维码</Button>
        <Button type="primary" class="lyx-table-btn" size="small"  @click="add(row)">电话</Button>
        <Button type="primary" class="lyx-table-btn" size="small"  @click="addCard(row)">答题卡</Button>
      </template>
    </Table>
    <Row v-if="loadData === true">
      <Col class="demo-spin-col" span="8" offset="8">
        <Spin fix>
          <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
          <div>数据正在加载</div>
        </Spin>
      </Col>
    </Row>
    <Page :total="totalnum" :current="currentPageNo" :page-size="currentPageSize" @on-change="change" class="page_style"/>
  </Card>
</template>

<script>
import { getMailLevelList, insertScore, getMailLevelPageList, findUserPeopleList, createSendSMS } from '@/api/eventlist'
import QRCode from 'qrcodejs2'
import Clipboard from 'clipboard'
export default {
  name: 'score',
  data () {
    return {
      phone: '',
      id: '',
      status_collen: '征集中',
      status_complate: '已完成',
      state: '0',
      loadData: false, // true加载
      params: { pageNo: 1, pageSize: 10, totalnum: 0 },
      searchInfo: { title: '' },
      paramData: { score_sanitation: 0, score_serve: 0 },
      currentPageSize: 10,
      currentPageNo: 1,
      totalnum: 0,
      columns1: [
        { title: '序号', type: 'index', width: 70, align: 'center' },
        { title: '社区名称', key: 'community', width: 250, align: 'center' },
        { title: '所属街道', key: 'street', width: 200, align: 'center' },
        { title: '社区账号', key: 'company_code', width: 200, align: 'center' },
        {
          title: '操作',
          slot: 'action',
          align: 'center'
        }
      ],
      ruleVaildScore: {
        score_man: [{
          required: true, message: '评分人不能为空', trigger: 'blur'
        }],
        score_man_phone: [{
          required: true, message: '评分人电话不能为空', trigger: 'blur'
        }],
        type: [{
          required: true, message: '评分渠道不能为空', trigger: 'blur'
        }]
      },
      typeList: [
        {
          value: '3',
          label: '答题卡'
        },
        {
          value: '4',
          label: '电话'
        }
      ],
      question: [],
      tempDatalist: [],
      modalTitle: '',
      addModal: false,
      problemDetails: false,
      choose_status: '',
      qrCodeModel: false,
      copyModel: false,
      url: '',
      company_code: this.$store.state.user.severUserInfo.company_code,
      mailList: [[], [], []],
      disableScore: false
    }
  },
  methods: {
    close () {
      this.question = {}
    },
    // 查询订单列表接口
    init (params) {
      this.tempDatalist = []
      this.loadData = true
      getMailLevelPageList(params).then(res => {
        console.log(res)
        if (res.data.errcode === 0) {
          this.tempDatalist = res.data.data.results
          this.totalnum = res.data.data.totalPage
          this.loadData = false
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '查询区域列表信息失败' })
        }
      })
    },
    searchData () {
      let params = {
        pageNo: 1,
        pageSize: 10
      }
      this.currentPageNo = 1
      this.init(params)
    },
    change (pageNo) {
      let params = {
        pageNo: pageNo,
        pageSize: 10,
        company_code: this.company_code
      }
      // this.loadData = true
      this.init(params)
    },
    // 添加问题
    add (row) {
      this.id = ''
      this.addModal = true
      let param = {}
      param.company_code = row.company_code
      console.log(param.company_code, 'ooooooo')
      findUserPeopleList(param).then(res => {
        console.log(res, '2255666')
        if (res.data.errcode === 0) {
          let array = []
          if (res.data.data.results != null && res.data.data.results.length > 0) {
            let arrayIndex = Math.floor(Math.random() * res.data.data.results.length)
            array = res.data.data.results[arrayIndex]
            console.log(array.name, '999999999')
            this.paramData = {}
            this.paramData.score_man = array.name
            this.paramData.score_man_phone = array.mobile
            this.paramData.company_code = row.company_code
            this.paramData.commounity = row.community
            this.paramData.street = row.street
            this.paramData.city = row.city
            this.paramData.create_by = this.company_code
            this.paramData.type = '4'
          }
        } else {
          this.$Modal.error({
            title: '查询人员失败'
          })
        }
      })
      this.modalTitle = '电话评分详情'
    },
    addCard (row) {
      this.id = ''
      this.addModal = true
      this.paramData = {}
      this.paramData.company_code = row.company_code
      this.paramData.commounity = row.community
      this.paramData.street = row.street
      this.paramData.city = row.city
      this.paramData.create_by = this.company_code
      this.paramData.type = '3'
      this.modalTitle = '答题卡评分详情'
    },
    // 添加 评分记录
    scoreSubmit (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          insertScore(this.paramData).then(ret => {
            let result = ret.data
            if (result.errcode === 0) {
              this.$Modal.success({
                title: '保存成功'
              })
              this.addModal = false
            } else {
              this.$Modal.error({
                title: '保存失败'
              })
            }
          })
          this.init(this.params)
        } else {
          this.$Modal.error({
            title: '请完善信息'
          })
        }
      })
    },
    bindQRCode (row) {
      document.getElementById('qrCode').innerHTML = ''
      this.url = 'http://qstb.mzj.shenyang.gov.cn/mzmobile/#/quanshitongban/score?community=' + row.community + '&street=' + row.street + '&city=' + row.city + '&type=2' + '&iscs=true'
      /* eslint-disable no-new */
      new QRCode(this.$refs.qrCodeDiv, {
        text: this.url,
        width: 150,
        height: 150,
        colorDark: '#333333', // 二维码颜色
        colorLight: '#ffffff', // 二维码背景色
        correctLevel: QRCode.CorrectLevel.L // 容错率，L/M/H
      })
      this.qrCodeModel = true
    },
    copyOpen (row) {
      let array = {}
      let param = {}
      // let phoneArray = []
      param.company_code = row.company_code
      findUserPeopleList(param).then(res => {
        // console.log(res, '2255666')
        if (res.data.errcode === 0) {
          if (res.data.data.results != null && res.data.data.results.length > 0) {
            for (let i = 0; i < 10; i++) {
              let arrayIndex = Math.floor(Math.random() * res.data.data.results.length)
              array = res.data.data.results[arrayIndex]
              console.log(array.mobile, '44444444')
              if (this.phone) {
                this.phone = this.phone + ',' + array.mobile
              } else {
                this.phone = array.mobile
              }
            }
            console.log(this.phone, '5555555')
            // 调用短信接口
            let data = {}
            this.url = 'http://qstb.mzj.shenyang.gov.cn/mzmobile/#/quanshitongban/score?community=' + row.community + '&street=' + row.street + '&type=1'
            data.UserNumber = this.phone
            data.MessageContent = '请您点击下方链接对您所在的社区' + row.community + '进行评价' + this.url
            createSendSMS(data).then(ret => {
              if (ret.data.errcode === 0) {
                this.$Modal.success({ title: '发送成功' })
              } else {
                this.$Modal.error({
                  title: '发送失败'
                })
              }
            })
          } else {
            this.$Modal.error({
              title: '查询人员失败'
            })
          }
        }
      })
      // phoneArray.push
      // this.url = window.location.href.replace(this.$route.path, '') + '/fillvote' + '?problem_id=' + row.id
      // this.copyModel = true
    },
    copyUrl () {
      let clipboard = new Clipboard('.tag-button')
      clipboard.on('success', e => {
        this.$Modal.success({
          title: '复制成功'
        })
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        clipboard.destroy()
      })
    },
    // 社区统计下拉搜索框的级联查询
    getCommunityList (id, index) {
      if (id === 0) {
        this.mailList[index] = []
        return
      }
      getMailLevelList({ id: id }).then(res => {
        if (res.data.errcode === 0) {
          this.mailList[index] = res.data.data
          this.mailList[index].unshift({ id: 0, title: '全部' })
          this.$forceUpdate()
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '查询区域列表信息失败' })
        }
      })
    },
    // df
    getMailCompany (index) {
      getMailLevelList({ company_code: this.company_code }).then(res => {
        if (res.data.errcode === 0) {
          this.mailList[index] = res.data.data
          this.mailList[index].unshift({ id: 0, title: '全部' })
          this.$forceUpdate()
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '查询区域列表信息失败' })
        }
      })
    }
  },
  mounted () {
    this.getCommunityList(null, 0)
    this.params.company_code = this.company_code
    this.init(this.params)
  }
}
</script>
